import React from 'react'
import {Link} from 'react-router'

import norecord from '../public/img/img_anonymous.png'
import Api from "../router/Api";
import requestSign from "../public/js/requestSign";
import axios from 'axios'


class Myassets extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            waitRepayment:null,
            alreadyRepayment:null,
            norecord:true,
            assetsLists:[]
        }
    }
    componentWillMount(){
        const _this= this;
        Api.getTimeStamp()
            .then(function (res) {
                const token = sessionStorage.getItem('token');
                const timestamp = res.data.data.timestamp;
                const sign = requestSign({timestamp,token});
                axios.all([Api.getAmount({
                    token:token,
                    timestamp:timestamp,
                    sign:sign.sign
                }),Api.getRepaymentInfo({
                    token:token,
                    timestamp:timestamp,
                    sign:sign.sign
                })])
                    .then(axios.spread(function (acct, perms) {
                        // 两个请求现在都执行完成
                        console.log(acct);
                        console.log(perms);
                        if(acct.data.success){
                            _this.setState({
                                waitRepayment:acct.data.data.waitRepayment,
                                alreadyRepayment:acct.data.data.alreadyRepayment,
                            })
                        }
                        if(perms.data.success){
                            if(perms.data.data.rows.length>0){
                                _this.setState({
                                    assetsLists:perms.data.data.rows
                                })
                            }else{
                                _this.setState({
                                    norecord:false
                                })
                            }

                        }
                    }))
            })
            .catch(function (err) {
                console.log(err)
            })
    }

    render(){
        const timeCut = (time)=>new Date(time).getFullYear()+'-'+(new Date(time).getMonth()+1)+'-'+new Date(time).getDate();
        const assets = this.state.assetsLists.map((asset,i) =>
            <li key={i}>
                <Link to={"details/"+asset.id}>
                    <div className="clearFix">
                        <h5 className="fl">{asset.title}</h5>
                        <p className="fr">第{(asset.repaymentType == 1) ?"1/1":asset.rdperiod+"/"+asset.rdcount}期，共{asset.rdcount}期</p>
                    </div>
                    <div className="clearFix">
                        <div className="fl">
                            <h6>本期应还<span>{asset.repaymentAmount}</span>元</h6>
                            <p>还款日{timeCut(asset.rdTime)}</p>
                        </div>
                        <p className="fl">借款金额(元)：{asset.amount}</p>
                        <p className="fl">应还本息(元)：{asset.rdsum}</p>
                        <p className="fr">还款方式：{asset.repaymentTypeName}</p>
                    </div>
                </Link>
            </li>
        )
        return(
            <div className="center-main">
                <h3>我的资产</h3>
                <div className="assets-info clearFix">
                    <div className="fl">
                        <h4>{this.state.waitRepayment ? (this.state.waitRepayment).toLocaleString('en-US') : 0}</h4>
                        <p>待还款金额(元)</p>
                    </div>
                    <div className="fr">
                        <h4>{this.state.alreadyRepayment ? (this.state.alreadyRepayment).toLocaleString('en-US') : 0}</h4>
                        <p>已还款金额(元)</p>
                    </div>
                </div>
                <div className="record">
                    <h3>待还款记录</h3>
                    <ul>{assets}</ul>
                    <div className={this.state.norecord ? "hide" : "norecord"}>
                        <img src={norecord} alt=""/>
                    </div>
                </div>
            </div>
        )
    }
}


export default Myassets